<template>
  <div class="global">
    <div class="error" v-if="error">
      <div class="error-msg-wrapper">
        <div class="error-image">
          <ImageView src="https://www.youbaobao.xyz/resource/icon/crash.png" />
        </div>
        <div class="error-msg">
          {{ error.message || "程序猿紧急抢修中..." }}
        </div>
        <div class="error-retry-wrapper">
          <div class="error-retry" @click="retry">重启小程序</div>
        </div>
      </div>
    </div>
    <slot v-if="!error"></slot>
  </div>
</template>

<script>
import store from "@/store";
import { setError } from "@/utils/error";
import ImageView from "./base/ImageView";
export default {
  components: { ImageView },
  computed: {
    error() {
      return store.state.error;
    },
  },
  methods: {
    retry() {
      // 跳转回到首页
      let path = getApp().globalData.appOptions.path;
      if (!path.startsWith("/")) {
        path = `/${path}`;
      }
      mpvue.reLaunch({ url: path });
      // 重置异常信息
      setError();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../style/base";

.error {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  @include center;

  .error-msg-wrapper {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;

    .error-image {
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
    }

    .error-msg {
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: #666;
      margin-top: 20px;
    }

    .error-retry-wrapper {
      width: 100%;
      @include center;

      .error-retry {
        border: 1px solid #3696ef;
        border-radius: 50px;
        text-align: center;
        font-size: 13px;
        color: #3696ef;
        padding: 8px 40px;
        margin-top: 10px;
      }
    }
  }
}
</style>